import React, { useContext, useEffect } from 'react'
import context from './contextCreator'
import ajax from './data'

export default function Books() {
  const { state, dispatch } = useContext(context)

  useEffect(() => {
    ;(async () => {
      const books = await ajax('/books')
      dispatch({
        type: 'books',
        books
      })
    })()
  }, [dispatch])

  return (
    <div>Books: 
      {
        state.books && state.books.map((book) => {
          return (
            <span key={book.id}>{book.name}，</span>
          )
        })
      }
    </div>
  )
}
